<template>
  <div class="flex">
    <div class="leftDiv"><img :src="creditProData.imgUrl" alt=""></div>
    <div class="rightDiv">
      <div v-if="creditProData.productName">{{creditProData.productName}}</div>
      <div v-if="creditProData.maxAmount">{{creditProData.maxAmount}}</div>
      <div v-if="creditProData.desc">{{creditProData.desc}}</div>
      <el-button v-if="creditProData.button" type="primary"@click="goTo(creditProData.url)">{{creditProData.button}}</el-button>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      creditProData: {
        type: Object,
        default(){
          return {}
        }
      }
    },
    methods: {
      goTo(u) {
        window.location.href = u
      }
    }
  }
</script>
<style scoped lang="less">
.flex {
  cursor: pointer;
  width: 220px;
  .leftDiv {
    height: 110px;
    width: 110px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .rightDiv {
    div + div {
      padding-top: 10px;
    }
    div:nth-of-type(1){
      padding-top: 10px;
      font-size: 26px;
      font-weight: 600;
    }
  }
}
</style>